<template>
	<eui-page-frame topHeight="260">
		<template #top>
			<view class="content-img">
				<eui-nav-bar title="招商综合视图" color="#000000" rightIcon='' />
				<view>
					<eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex" :showBadge="false"
						@change="tabChange"></eui-tab>
				</view>
			</view>
		</template>
		<eui-page-content>
			<view v-if="tabIndex===0">
				<eui-data-statistics type="ViewReport" :background="themeBgColor"
					:dataList="dataList1"></eui-data-statistics>
				<view style="margin-top: 20rpx;">
					<TableCard :title="title1" :whereList="whereListData1" :showCharts="true" :chartOpts="chartOption1"
						:chartStyle="chartStyle1" :column="column1" :listData="listData1" @onSearch="onSearch1">
					</TableCard>
				</view>
				<view style="margin-top: 20rpx;">
					<TableCard :title="title2" :whereList="whereListData2" :column="column2" :listData="listData2"
						@onSearch="onSearch2">
					</TableCard>
				</view>
			</view>
			<view v-else-if="tabIndex===1">
				<eui-data-statistics type="ViewReport" :background="themeBgColor"
					:dataList="dataList2"></eui-data-statistics>
				<view style="margin-top: 20rpx;">
					<TableCard :title="title3" :whereList="whereListData3" :column="column3" :listData="listData3"
						@onSearch="onSearch3">
					</TableCard>
				</view>
				<view style="margin-top: 20rpx;">
					<TableCard :title="title4" :whereList="whereListData4" :column="column4" :listData="listData4"
						@onSearch="onSearch4">
					</TableCard>
				</view>
			</view>
			<view v-else-if="tabIndex===2">
				<eui-data-statistics type="ViewReport" :background="themeBgColor"
					:dataList="dataList3"></eui-data-statistics>
				<view style="margin-top: 20rpx;">
					<TableCard :title="title5" :column="column5" :listData="listData5" :showCharts="true"
						:chartOpts="chartOption2" :chartStyle="chartStyle2">
					</TableCard>
				</view>
				<view style="margin-top: 20rpx;">
					<TableCard :title="title6" :whereList="whereListData6" :column="column6" :listData="listData6"
						@onSearch="onSearch6">
					</TableCard>
				</view>
			</view>
			<view v-else>
				<eui-data-statistics type="ViewReport" :background="themeBgColor"
					:dataList="dataList4"></eui-data-statistics>
				<view style="margin-top: 20rpx;">
					<eui-base-card :title="title7">
						<view class="table-card-combox">
							<eui-combox v-for="(item,index) in dropSelect8" :selectWidth="item.c_width??'100rpx'"
								v-model="item.c_value" valueColor="#666666" backgroundColor="#F8F8F8" :border="false"
								:candidates="item.c_options" :fieldName="item.c_col" @selectChange="onSearch8"
								:style="[index===0?'':'margin-left:20rpx;']" :placeholder="item.c_placeholder">
							</eui-combox>
						</view>
						<eui-lime-chart v-if="chartData3.length>0" :option="chartOption3" :chartStyle="chartStyle3" />
						<view v-else>
							<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
							<view class="no-data-text">暂无数据</view>
						</view>
						<!-- <eui-lime-chart :option="chartOpts1"></eui-lime-chart> -->
					</eui-base-card>
				</view>
				<view style="margin-top: 20rpx;">
					<TableCard :title="title8" :whereList="whereListData7" :column="column7" :listData="listData7"
						@onSearch="onSearch7" :showCharts="true" :chartOpts="chartOption4" :chartStyle="chartStyle4">
					</TableCard>
				</view>
			</view>
		</eui-page-content>
	</eui-page-frame>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import TableCard from '@/components/TableCard.vue';
	import dayjs from 'dayjs';
	import { getRelatedName, getDictName, getDictSelectList, getDictSelect } from '../components/RelatedName.js';
	import { useLoginStore } from '@/store/modules/useLoginStore';
	import { useMainStore } from "@/store/modules/store";
	import useService from '@/hooks/useService';
	import { storeToRefs } from 'pinia';
	import { useThemeStore } from '@/store/themeStore';
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	//主题色
	const themeBgColor = ref(theme._object.theme == 'theme-blue' ? "linear-gradient( 135deg, #02B7E6 0%, #36A9F3 100%)  #FFFFFF" : 'linear-gradient( 135deg, #FF8359 0%, #FF6430 100%)  #FFFFFF')
	const service = useService({ prefix: "apiApi" });
	const mainStore = useMainStore();
	const { loginInfo } = mainStore;
	const tagList = ['primary', 'warning', 'error', 'success'];
	const tagType = ref([]);
	const tabData = ref(['铺位', '招商过程', '合同管理', '品牌管理']);
	const tabIndex = ref(0);
	const colorList = ref([
		{
			value: '1',
			text: '待招商',
			color: '#02B7E6'
		},
		{
			value: '2',
			text: '已预租',
			color: '#FF9400'
		},
		{
			value: '3',
			text: '已签约',
			color: '#2789FF'
		},
		{
			value: '0',
			text: '不可招商',
			color: '#00AD60'
		}]
	)
	const colorList2 = ref([
		{
			value: 'A',
			text: 'A',
			color: '#02B7E6'
		},
		{
			value: 'B',
			text: 'B',
			color: '#FF9400'
		},
		{
			value: 'C',
			text: 'C',
			color: '#2789FF'
		},
		{
			value: '0',
			text: '不可招商',
			color: '#00AD60'
		}]
	)
	const businessType = ref([]);
	const spaceLeft = ref(6);
	const floorList = ref([]);
	const title1 = ref('招商状态');
	const title2 = ref('铺位预警');
	const title3 = ref('洽谈中');
	const title4 = ref('洽谈工作');
	const title5 = ref('合同到期分布');
	const title6 = ref('合同明细');
	const title7 = ref('业态配比');
	const title8 = ref('品牌分布');
	const topData = ref({
		c_empty_count: '0',
		c_empty_rate: '0',
		c_empty_area: '0',
		c_newsign_contract: '0',
		c_signIn_rate: '0',
		c_renew_rate: '0',
		c_end_count: '0',
		//年度计划达成率
		c_finished_rate: '0',
		c_signbrand_count: '0',
		c_first_store: '0',
		c_monthin_brand: '0',
		c_monthtalk_count: '0',
		c_provider_count: '0',
		c_yearin_brand: '0',
		c_year_survey: '0',
		c_brand_count: '0'
	});
	const dataList1 = ref([
		{
			mode: 'large',
			isTop: true,
			title: '空铺数量',
			value: 0,
			colSpan: 18,
			valueUnit: '',
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '28rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 }
		},
		{
			mode: 'small',
			isTop: true,
			title: '空铺率',
			value: 0,
			colSpan: 6,
			valueUnit: '%',
			unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		},
		{
			mode: 'small',
			isTop: false,
			title: '空铺面积',
			value: 0,
			colSpan: 12,
			valueUnit: 'm²',
			unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
			icon: '',
			iconColor: '',
			iconSize: 20,
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		},
		{
			mode: 'small',
			isTop: false,
			title: '空铺预警',
			value: 0,
			colSpan: 12,
			valueUnit: '',
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
			// unitStyle: { color: '#ffffff', fontWeight: 600 }
		},
		// {
		// 	mode: 'small',
		// 	isTop: false,
		// 	title: '跟进中',
		// 	value: 0,
		// 	colSpan: 6,
		// 	valueUnit: '',
		// 	unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		// 	icon: '',
		// 	iconColor: '',
		// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	// unitStyle: { color: '#FF9400', fontWeight: 600 }
		// },
		// {
		// 	mode: 'small',
		// 	isTop: false,
		// 	title: '待跟进',
		// 	value: 0,
		// 	colSpan: 6,
		// 	valueUnit: '',
		// 	icon: '',
		// 	iconColor: '',
		// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
		// }
	]);
	const dataList2 = ref([
		{
			mode: 'large',
			isTop: true,
			title: '招商计划达成',
			value: 0,
			colSpan: 18,
			valueUnit: '%',
			unitStyle: { color: '#ffffff', fontWeight: 600 },
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '28rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 }
		},
		{
			mode: 'small',
			isTop: true,
			title: '空铺率',
			value: 0,
			colSpan: 6,
			valueUnit: '%',
			unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		},
		{
			mode: 'small',
			isTop: false,
			title: '本月洽谈',
			value: 0,
			colSpan: 12,
			valueUnit: '次',
			unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
			icon: '',
			iconColor: '',
			iconSize: 0,
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		},
		// {
		// 	mode: 'small',
		// 	isTop: false,
		// 	title: '接触品牌',
		// 	value: 0,
		// 	colSpan: 6,
		// 	valueUnit: '',
		// 	icon: '',
		// 	iconColor: '',
		// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
		// },
		{
			mode: 'small',
			isTop: false,
			title: '签约',
			value: 0,
			colSpan: 12,
			valueUnit: '',
			unitStyle: {},
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
			// unitStyle: { color: '#FF9400', fontWeight: 600 }
		},
		// {
		// 	mode: 'small',
		// 	isTop: false,
		// 	title: '首店',
		// 	value: 0,
		// 	colSpan: 6,
		// 	valueUnit: '',
		// 	icon: '',
		// 	iconColor: '',
		// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
		// },
	]);
	const dataList3 = ref([
		{
			mode: 'large',
			isTop: true,
			title: '近一个月已签约',
			value: 0,
			colSpan: 18,
			valueUnit: '',
			unitStyle: {},
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '28rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 }
		},
		{
			mode: 'small',
			isTop: true,
			title: '及时签约率',
			value: 0,
			colSpan: 6,
			valueUnit: '%',
			unitStyle: { color: '#ffffff', fontSize: '22rpx', fontWeight: 600 },
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '22rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		},
		// {
		// 	mode: 'small',
		// 	isTop: false,
		// 	title: '意向中',
		// 	value: 0,
		// 	colSpan: 6,
		// 	valueUnit: '',
		// 	unitStyle: {},
		// 	icon: '',
		// 	iconColor: '',
		// 	iconSize: 0,
		// 	titleStyle: { color: '#ffffff', fontSize: '22rpx' },
		// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// },
		// {
		// 	mode: 'small',
		// 	isTop: false,
		// 	title: '流程中',
		// 	value: 0,
		// 	colSpan: 6,
		// 	valueUnit: '',
		// 	icon: '',
		// 	iconColor: '',
		// 	titleStyle: { color: '#ffffff', fontSize: '22rpx' },
		// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
		// },
		{
			mode: 'small',
			isTop: false,
			title: '到期预警',
			value: 0,
			colSpan: 12,
			valueUnit: '',
			unitStyle: {},
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '22rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
			// unitStyle: { color: '#FF9400', fontWeight: 600 }
		},
		{
			mode: 'small',
			isTop: false,
			title: '到期续约率',
			value: 0,
			colSpan: 12,
			valueUnit: '%',
			unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
			// unitStyle: { color: '#ffffff', fontWeight: 600 }
		},
	]);
	const dataList4 = ref([
		{
			mode: 'large',
			isTop: true,
			title: '在库品牌数',
			value: 0,
			colSpan: 24,
			valueUnit: '',
			unitStyle: {},
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '28rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 }
		},
		{
			mode: 'small',
			isTop: false,
			title: '本月增',
			value: 0,
			colSpan: 12,
			valueUnit: '',
			unitStyle: {},
			icon: '',
			iconColor: '',
			iconSize: 0,
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		},
		// {
		// 	mode: 'small',
		// 	isTop: false,
		// 	title: '合作中',
		// 	value: 0,
		// 	colSpan: 6,
		// 	valueUnit: '',
		// 	icon: '',
		// 	iconColor: '',
		// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
		// },
		{
			mode: 'small',
			isTop: false,
			title: '本年入库',
			value: 0,
			colSpan: 12,
			valueUnit: '',
			unitStyle: {},
			icon: '',
			iconColor: '',
			titleStyle: { color: '#ffffff', fontSize: '24rpx' },
			largeValueStyle: { color: '#ffffff', fontWeight: 600 },
			smallValueStyle: { color: '#ffffff', fontWeight: 600 },
			// unitStyle: { color: '#FF9400', fontWeight: 600 }
		},
		// {
		// 	mode: 'small',
		// 	isTop: false,
		// 	title: '调研',
		// 	value: 0,
		// 	colSpan: 6,
		// 	valueUnit: '次',
		// 	unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		// 	icon: '',
		// 	iconColor: '',
		// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
		// },
	]);
	//分类商品品项组成
	const column1 = ref([
		{
			title: '招商状态', // th标题
			isFixed: true, // 是否固定
			key: 'c_merchant', // 对应字段，
			align: 'left',
			width: 2, // 宽度 width * 100 rpx,
			slot: 'c_merchant',
			slotInfo: {
				type: 'dotText',
				colorList: [{
					value: '1', text: '待招商', color: '#02B7E6'
				}, {
					value: '2', text: '已预租', color: '#FF9400'
				}, {
					value: '3', text: '已签约', color: '#2789FF'
				}, {
					value: '0', text: '不可招商', color: '#00AD60'
				}]
			}
		},
		{
			title: '数量', // th标题
			isFixed: false, // 是否固定
			key: 'c_count', // 对应字段
			align: 'right',
			width: 1.2,
			//slot: 'b' // 插槽名
		},
		{
			title: '数量占比(%)', // th标题
			isFixed: false, // 是否固定
			key: 'c_percent_count', // 对应字段
			align: 'right',
			width: 2,
			//slot: 'c' // 插槽名
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'c_use_area',
			align: 'right',
			width: 1.6,
		},
		{
			title: '面积占比(%)', // th标题
			isFixed: false, // 是否固定
			key: 'c_percent_area',
			align: 'right',
			width: 2,
		}
	]);
	//铺位预警
	const column2 = ref([
		{
			title: '楼层', // th标题
			isFixed: true, // 是否固定
			key: 'c_floor_name', // 对应字段，
			align: 'left',
			width: 1.2, // 宽度 width * 100 rpx
		},
		{
			title: '铺位', // th标题
			isFixed: false, // 是否固定
			key: 'c_counter_name', // 对应字段
			align: 'left',
			width: 2,
			//slot: 'b' // 插槽名
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'c_area',
			align: 'right',
			width: 1.6,
		},
		{
			title: '运营', // th标题
			isFixed: false, // 是否固定
			key: 'c_operate_status', // 对应字段
			align: 'left',
			width: 1.4,
			//slot: 'c' // 插槽名
		},
		{
			title: '到期日', // th标题
			isFixed: false, // 是否固定
			key: 'c_expire_date',
			align: 'left',
			width: 2.2,
		},
	]);
	//洽谈中
	const column3 = ref([
		{
			title: '品牌', // th标题
			isFixed: true, // 是否固定
			key: 'brandname', // 对应字段，
			align: 'left',
			width: 2, // 宽度 width * 100 rpx
		},
		{
			title: '业态', // th标题
			isFixed: false, // 是否固定
			key: 'c_bcname', // 对应字段，
			align: 'left',
			width: 1.5, // 宽度 width * 100 rpx
		},
		{
			title: '铺位', // th标题
			isFixed: false, // 是否固定
			key: 'c_counter_name', // 对应字段
			align: 'left',
			width: 2,
			//slot: 'b' // 插槽名
		},
		{
			title: '楼层', // th标题
			isFixed: false, // 是否固定
			key: 'floorname', // 对应字段，
			align: 'left',
			width: 1.2, // 宽度 width * 100 rpx
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'c_use_area',
			align: 'right',
			width: 2.0,
		},
		{
			title: '跟进情况', // th标题
			isFixed: false, // 是否固定
			key: 'c_tagname',
			align: 'left',
			width: 2.5,
			slot: 'c_tagname',
			slotInfo: { type: 'tag' }
		},
	]);
	//洽谈工作
	const column4 = computed(() => {
		let type = whereListData4.value.find(x => x.c_col == 'departOrMember')?.c_value || '0'
		return [
			{
				title: type === '1' ? '洽谈人' : '洽谈部门', // th标题
				isFixed: true, // 是否固定
				key: 'c_talk_name', // 对应字段，
				align: 'left',
				width: 1.6, // 宽度 width * 100 rpx
			},
			{
				title: '本月次数', // th标题
				isFixed: false, // 是否固定
				key: 'current_month_count', // 对应字段，
				align: 'right',
				width: 1.6, // 宽度 width * 100 rpx
			},
			{
				title: '本月占比(%)', // th标题
				isFixed: false, // 是否固定
				key: 'current_month_percent', // 对应字段
				align: 'right',
				width: 2,
				//slot: 'b' // 插槽名
			},
			{
				title: '上月次数', // th标题
				isFixed: false, // 是否固定
				key: 'pre_month_count', // 对应字段，
				align: 'right',
				width: 1.6, // 宽度 width * 100 rpx
			},
			{
				title: '上月占比(%)', // th标题
				isFixed: false, // 是否固定
				key: 'pre_month_percent',
				align: 'right',
				width: 2,
			},
			{
				title: '本年次数', // th标题
				isFixed: false, // 是否固定
				key: 'current_year_count',
				align: 'right',
				width: 1.6,
			},
			{
				title: '本年占比(%)', // th标题
				isFixed: false, // 是否固定
				key: 'current_year_percent',
				align: 'right',
				width: 2,
			},
			{
				title: '成功合作', // th标题
				isFixed: false, // 是否固定
				key: 'c_success_count',
				align: 'right',
				width: 1.6,
			},
		]
	});
	//合同到期分布
	const column5 = ref([
		{
			title: '到期时间', // th标题
			isFixed: true, // 是否固定
			key: 'c_day_diff', // 对应字段，
			align: 'left',
			width: 2.2, // 宽度 width * 100 rpx
			slot: 'c_day_diff',
			slotInfo: {
				type: 'dotText',
				colorList: [{
					value: '30天', text: '30天', color: '#02B7E6'
				}, {
					value: '60天', text: '60天', color: '#FF9400'
				}, {
					value: '90天', text: '90天', color: '#2789FF'
				}, {
					value: '90天以上', text: '90天以上', color: '#00AD60'
				}]

			}
		},
		{
			title: '数量', // th标题
			isFixed: false, // 是否固定
			key: 'c_count', // 对应字段
			align: 'right',
			width: 1.2,
			//slot: 'b' // 插槽名
		},
		{
			title: '数量占比(%)', // th标题
			isFixed: false, // 是否固定
			key: 'c_percent_count', // 对应字段
			align: 'right',
			width: 2,
			//slot: 'c' // 插槽名
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'c_use_area',
			align: 'right',
			width: 1.6,
		},
		{
			title: '面积占比(%)', // th标题
			isFixed: false, // 是否固定
			key: 'c_percent_area',
			align: 'right',
			width: 2,
		}
	])
	//合同明细
	const column6 = ref([
		{
			title: '合同号', // th标题
			isFixed: true, // 是否固定
			key: 'c_con_no', // 对应字段，
			align: 'left',
			width: 1.8, // 宽度 width * 100 rpx
		},
		{
			title: '楼层', // th标题
			isFixed: false, // 是否固定
			key: 'c_floor_name', // 对应字段，
			align: 'left',
			width: 1.2, // 宽度 width * 100 rpx
		},
		{
			title: '铺位', // th标题
			isFixed: false, // 是否固定
			key: 'c_counter_name', // 对应字段
			align: 'left',
			width: 1.5,
			//slot: 'b' // 插槽名
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'c_use_area',
			align: 'right',
			width: 1.6,
		},
		{
			title: '品牌', // th标题
			isFixed: true, // 是否固定
			key: 'c_brand_name', // 对应字段，
			align: 'left',
			width: 1.2, // 宽度 width * 100 rpx
		},
		{
			title: '到期日', // th标题
			isFixed: false, // 是否固定
			key: 'c_en_dt',
			align: 'left',
			width: 2.2
		},
	])
	//品牌分布
	const column7 = computed(() => {
		let type = whereListData7.value.find(x => x.c_col == 'type')?.c_value || '1'
		let column = [];
		switch (type) {
			case "1":
				column.push({
					title: '等级', // th标题
					isFixed: true, // 是否固定
					key: 'c_type_name', // 对应字段，
					align: 'left',
					width: 1.6, // 宽度 width * 100 rpx
					slot: 'c_type_name',
					slotInfo: {
						type: 'dotText',
						colorList: [{
							value: 'A', text: 'A', color: '#02B7E6'
						}, {
							value: 'B', text: 'B', color: '#FF9400'
						}, {
							value: 'C', text: 'C', color: '#2789FF'
						}, {
							value: 'D', text: 'D', color: '#00AD60'
						}]

					}
				});
				break
			case "2":
				column.push({
					title: '业态', // th标题
					isFixed: true, // 是否固定
					key: 'c_type_name', // 对应字段，
					align: 'left',
					width: 1.6, // 宽度 width * 100 rpx
				});
				break;
			case "3":
				column.push({
					title: '招商定位', // th标题
					isFixed: true, // 是否固定
					key: 'c_type_name', // 对应字段，
					align: 'left',
					width: 1.6, // 宽度 width * 100 rpx
					slot: 'c_type_name',
					slotInfo: {
						type: 'selectText',
						selectList: getDictSelectList('招商定位')
					}
				});
				break;
		}
		column.push({
			title: '数量', // th标题
			isFixed: false, // 是否固定
			key: 'c_count', // 对应字段
			align: 'right',
			width: 1.2,
			//slot: 'b' // 插槽名
		},
			{
				title: '数量占比(%)', // th标题
				isFixed: false, // 是否固定
				key: 'c_percent_count', // 对应字段
				align: 'right',
				width: 2,
				//slot: 'c' // 插槽名
			},
			{
				title: '经营面积', // th标题
				isFixed: false, // 是否固定
				key: 'c_use_area',
				align: 'right',
				width: 1.6,
			},
			{
				title: '面积占比(%)', // th标题
				isFixed: false, // 是否固定
				key: 'c_percent_area',
				align: 'right',
				width: 2,
			})
		return column;
	})

	const listData1 = ref([
		{
			c_merchant: '1',
			c_count: 0,
			c_percent_count: '0.00%',
			c_use_area: 0.00,
			c_percent_area: '0.00%'
		},
		{
			c_merchant: '2',
			c_count: 0,
			c_percent_count: '0.00%',
			c_use_area: 0.00,
			c_percent_area: '0.00%'
		},
		{
			c_merchant: '3',
			c_count: 0,
			c_percent_count: '0.00%',
			c_use_area: 0.00,
			c_percent_area: '0.00%'
		},
		{
			c_merchant: '0',
			c_count: 0,
			c_percent_count: '0%',
			c_use_area: 0.00,
			c_percent_area: '0%'
		}
	]);
	const listData2 = ref([]);
	const listData3 = ref([]);
	const listData4 = ref([]);
	const listData5 = ref([]);
	const listData6 = ref([]);
	const listData7 = ref([]);
	const listData8 = ref([]);
	const chartData1 = ref([])
	const chartOption1 = computed(() => {
		return {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				show: true,
				orient: 'vertical',
				right: '15',
				top: 'center', // 设置图例的垂直位置在顶部
				icon: 'circle', // 设置图例的形状为圆形
				itemWidth: 6,
				itemHeight: 6,
				itemGap: 20,
				textStyle: {
					fontSize: 13,
					lineHeight: 18,
					rich: {
						A: {
							color: '#666666',
							fontSize: 13,
							align: 'left',
							fontWeight: 400,
							width: 54
						},
						B: {
							color: '#000000',
							align: 'right',
							fontSize: 15,
							fontWeight: 600,
							width: 50
						}
					}
				},

				formatter: function (name) {
					let text = chartData1.value.find(x => x.name === name)?.percentCount || name;
					let newText = `{A|${name}}  {B|${text}}`;
					return newText;
				},
			},
			series: [
				{
					name: '',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['30%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
					},
					emphasis: {
						label: {
							show: false,
						}
					},
					labelLine: {
						show: false
					},
					data: chartData1.value,
					itemStyle: {
						normal: {
							color: function (params) {
								return colorList.value.find(x => x.text === params.name)?.color || '#02B7E6'
							}
						}
					}
				}
			]
		}

	});
	const chartStyle1 = ref("height: 350rpx;background: #FFFFFF");
	const chartData2 = ref([])
	const chartOption2 = computed(() => {
		return {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				show: true,
				orient: 'vertical',
				right: '15',
				top: 'center', // 设置图例的垂直位置在顶部
				icon: 'circle', // 设置图例的形状为圆形
				itemWidth: 6,
				itemHeight: 6,
				itemGap: 20,
				textStyle: {
					fontSize: 13,
					lineHeight: 18,
					rich: {
						A: {
							color: '#666666',
							fontSize: 13,
							align: 'left',
							fontWeight: 400,
							width: 54
						},
						B: {
							color: '#000000',
							align: 'right',
							fontSize: 15,
							fontWeight: 600,
							width: 52
						}
					}
				},

				formatter: function (name) {
					let text = chartData2.value.find(x => x.name === name)?.percentCount || name;
					let newText = `{A|${name}}  {B|${text}}`;
					return newText;
				},
				// formatter: function (name) {
				// 	return chartData2.value.find(x => x.name === name)?.labelText || name
				// },
			},
			series: [
				{
					name: '',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['30%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
					},
					emphasis: {
						label: {
							show: false,
						}
					},
					labelLine: {
						show: false
					},
					data: chartData2.value,
					itemStyle: {
						normal: {
							color: function (params) {
								let colorData = [{
									value: '30天', text: '30天', color: '#02B7E6'
								}, {
									value: '60天', text: '60天', color: '#FF9400'
								}, {
									value: '90天', text: '90天', color: '#2789FF'
								}, {
									value: '90天以上', text: '90天以上', color: '#00AD60'
								}]
								return colorData.find(x => x.text === params.name)?.color || '#02B7E6'
							}
						}
					}
				}
			]
		}
	});
	const chartStyle2 = ref("height: 350rpx;background: #FFFFFF");
	const chartData3 = ref([])
	const chart3yData = ref([]);
	const chartOption3 = computed(() => {
		return {
			tooltip: {
				trigger: 'none',
			},
			legend: {
				show: false,
			},
			color:['#7863FF','#0BCCCC','#02B7E6','#D480FF','#2789FF','#FF9400','#00AD60'],
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				top: '3%',
				containLabel: true,
			},
			xAxis: {
				show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
				axisTick: {
					show: false // 不显示坐标轴刻度线
				},
				axisLine: {
					show: false, // 不显示坐标轴线
				},
				axisLabel: {
					show: false, // 不显示坐标轴上的文字
				},
				splitLine: {
					show: false // 不显示网格线
				},
				type: 'value'
			},
			yAxis: {
				type: 'category',
				axisTick: {
					show: false // 不显示坐标轴刻度线
				},
				axisLine: {
					show: false, // 不显示坐标轴线
				},
				data: chart3yData.value
			},
			series: chartData3.value,
		}
	});
	const chartStyle3 = ref("height: 500rpx;background: #FFFFFF");
	const chartData4 = ref([])
	const chartOption4 = computed(() => {
		return {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				show: true,
				orient: 'vertical',
				right: '15',
				top: 'center', // 设置图例的垂直位置在顶部
				icon: 'circle', // 设置图例的形状为圆形
				itemWidth: 6,
				itemHeight: 6,
				itemGap: 20,
				textStyle: {
					lineHeight: 18,
					rich: {
						A: {
							color: '#666666',
							fontSize: 13,
							align: 'left',
							fontWeight: 400,
							width: 40
						},
						B: {
							color: '#000000',
							align: 'right',
							fontSize: 15,
							fontWeight: 600,
							width: 30
						}
					}
				},

				formatter: function (name) {
					let text = chartData4.value.find(x => x.name === name)?.percentCount || name;
					let newText = `{A|${name}}` + `{B|${text}}`;
					return newText;
				},
			},
			series: [
				{
					name: '',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['30%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
					},
					emphasis: {
						label: {
							show: false,
						}
					},
					labelLine: {
						show: false
					},
					data: chartData4.value,
					itemStyle: {
						normal: {
							color: function (params) {
								return colorList2.value.find(x => x.text === params.name)?.color || '#02B7E6'
							}
						}
					}
				}
			]
		}

	});
	const chartStyle4 = ref("height: 350rpx;background: #FFFFFF");

	const whereListData1 = ref([
		{
			c_value: '',
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'merchantState',
			c_width: '130rpx',
			c_is_search: true,
			c_placeholder: '招商状态',
			c_options: getDictSelect({ dataItem: '铺位招商状态', enableNullRow: true }),
			c_showSelector: false
		},
		{
			c_value: loginInfo.sUserStore,
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'storeId',
			c_width: '',
			c_is_search: false,
			c_placeholder: '机构',
			c_options: [],
			c_showSelector: false
		}
	]);
	const whereListData2 = ref([
		{
			c_value: loginInfo.sUserStore,
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'storeId',
			c_width: '',
			c_is_search: false,
			c_placeholder: '机构',
			c_options: [],
			c_showSelector: false
		}
	]);
	const whereListData3 = ref([
		{
			c_value: loginInfo.sUserStore,
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'storeId',
			c_width: '',
			c_is_search: false,
			c_placeholder: '机构',
			c_options: [],
			c_showSelector: false
		}
	]);
	const whereListData4 = ref([
		{
			c_value: loginInfo.sUserStore,
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'storeId',
			c_width: '',
			c_is_search: false,
			c_placeholder: '机构',
			c_options: [],
			c_showSelector: false
		},
		{
			c_value: '0',
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'departOrMember',
			c_width: '110rpx',
			c_is_search: true,
			c_placeholder: '',
			c_options: [{ value: '0', text: '按部门' }, { value: '1', text: '按人员' }],
			c_showSelector: false
		}
	]);
	const whereListData6 = computed(() => {
		return [
			{
				c_value: loginInfo.sUserStore,
				c_oper: "等于",
				c_logic: "而且",
				c_col: 'storeId',
				c_width: '',
				c_is_search: false,
				c_placeholder: '机构',
				c_options: [],
				c_showSelector: false
			},
			{
				c_value: '',
				c_oper: "等于",
				c_logic: "而且",
				c_col: 'arrivedMonth',
				c_width: '130rpx',
				c_is_search: true,
				c_placeholder: '到期预警',
				c_options: [{ text: '', value: '' }, { text: '30天到期', value: '30' }, { text: '60天到期', value: '60' }, { text: '90天到期', value: '90' }, { text: '90天以上到期', value: '91' }],
				c_showSelector: false
			},
			{
				c_value: '',
				c_oper: "等于",
				c_logic: "而且",
				c_col: 'counterform',
				c_width: '80rpx',
				c_is_search: true,
				c_placeholder: '业态',
				c_options: businessType.value,
				c_showSelector: false
			},
			{
				c_value: '',
				c_oper: "等于",
				c_logic: "而且",
				c_col: 'floor',
				c_width: '80rpx',
				c_placeholder: '楼层',
				c_is_search: true,
				c_options: floorList.value,
				c_showSelector: false
			}
		]
	});
	const whereListData7 = ref([
		{
			c_value: loginInfo.sUserStore,
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'storeId',
			c_width: '',
			c_is_search: false,
			c_placeholder: '机构',
			c_options: [],
			c_showSelector: false
		},
		{
			c_value: '1',
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'type',
			c_width: '140rpx',
			c_is_search: true,
			c_placeholder: '',
			c_options: [{ value: '1', text: '按重要性' }, { value: '2', text: '按业态' }, { value: '3', text: '按招商定位' }],
			c_showSelector: false
		}
	]);
	const whereListData8 = ref([
		{
			c_value: loginInfo.sUserStore,
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'storeId',
			c_width: '',
			c_is_search: false,
			c_placeholder: '机构',
			c_options: [],
			c_showSelector: false
		},
		{
			c_value: '1',
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'isContractOrGuiHua',
			c_width: '110rpx',
			c_is_search: true,
			c_placeholder: '',
			c_options: [{ text: '按规划', value: '1' }, { text: '按合同', value: '2' }],
			c_showSelector: false
		}
	]);
	const dropSelect8 = computed(() => {
		return whereListData8.value.filter(x => x.c_is_search === true);
	});
	onLoad(async () => {
		await GetBrandCount();
		await GetNumberShowData();
		await GetStructures();
		await GetBusinessType();
		await FetchBusinessProcess();
		whereListData1.value.push({
			c_value: '',
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'floor',
			c_width: '80rpx',
			c_is_search: true,
			c_placeholder: '楼层',
			c_options: floorList.value,
			c_showSelector: false
		});
		whereListData2.value.push({
			c_value: '',
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'floor',
			c_width: '80rpx',
			c_is_search: true,
			c_placeholder: '楼层',
			c_options: floorList.value,
			c_showSelector: false
		})
		whereListData3.value.push({
			c_value: '',
			c_oper: "等于",
			c_logic: "而且",
			c_col: 'floor',
			c_width: '80rpx',
			c_is_search: true,
			c_placeholder: '楼层',
			c_options: floorList.value,
			c_showSelector: false
		})
		await GetCounterStatusData();
		await GetCounterWarnData();
	})
	const onSearch1 = async (whereList : any) => {
		whereListData1.value = whereList;
		await GetCounterStatusData();
	}
	const onSearch2 = async (whereList : any) => {
		whereListData2.value = whereList;
		await GetCounterWarnData();
	}
	const onSearch3 = async (whereList : any) => {
		whereListData3.value = whereList;
		await InTalkingProcess();
	}
	const onSearch4 = async (whereList : any) => {
		whereListData4.value = whereList;
		await GetTalkWorkList();
	}
	const onSearch6 = async (whereList : any) => {
		whereListData6.value = whereList;
		await GetContractList();
	}
	const onSearch7 = async (whereList : any) => {
		whereListData7.value = whereList;
		await GetBrandStoreList();
	}
	const onSearch8 = async (args : any) => {
		whereListData8.value = whereListData8.value.map(x => {
			return {
				c_col: x.c_col,
				c_oper: x.c_oper,
				c_value: x.c_col === args.fieldName ? args.selectValue : x.c_value,
				c_logic: x.c_logic,
				c_width: x.c_width,
				c_options: x.c_options,
				c_is_search: x.c_is_search,
				c_placeholder: x?.c_placeholder,
				c_showSelector: x.c_col === args.fieldName ? true : false,
			}
		})
		await GetBusinessData();
	}
	//招商进程定义数据
	const FetchBusinessProcess = async () => {
		const res = await service.request('管易通洽谈记录登记单', 'FetchBusinessProcess', '');
		if (res) {
			tagType.value = res.map((item, index) => {
				return {
					value: item.c_id,
					text: item.c_name,
					type: tagList[index] ?? tagList[0]
				}
			});
		}
	}
	const GetBrandCount = async () => {
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetBrandCount', '');
		uni.hideLoading();
		topData.value.c_brand_count = res || '0';
	}
	///顶部数值统计
	const GetNumberShowData = async () => {
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetNumberShowData', loginInfo.sUserStore);
		uni.hideLoading();
		if (res) {
			topData.value.c_empty_count = res.ds[0]?.c_empty_count;
			topData.value.c_empty_rate = res.ds[0]?.c_empty_rate;
			topData.value.c_empty_area = res.ds[0]?.c_total_area;
			topData.value.c_newsign_contract = res.ds1[0]?.c_signnew_count
			topData.value.c_renew_rate = res.ds3[0]?.c_renewal_rate;
			topData.value.c_end_count = res.ds2[0]?.c_end_count;
			//年度计划达成率
			topData.value.c_finished_rate = res.ds4[0]?.c_finished_rate;
			topData.value.c_signbrand_count = res.ds5[0]?.c_signbrand_count;
			topData.value.c_first_store = '';
			topData.value.c_monthin_brand = res.ds6[0]?.c_monthinbrand_count;
			topData.value.c_monthtalk_count = res.ds8[0]?.c_talk_count;
			topData.value.c_provider_count = res.ds[8]?.c_provider_count;
			topData.value.c_yearin_brand = res.ds7[0]?.c_yearinbrand_count;
			topData.value.c_year_survey = '';
			topData.value.c_signIn_rate = res.ds9[0]?.c_signIn_rate;
			dataList1.value = [
				{
					mode: 'large',
					isTop: true,
					title: '空铺数量',
					value: Number(topData.value.c_empty_count || '0'),
					colSpan: 18,
					valueUnit: '',
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '28rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 }
				},
				{
					mode: 'small',
					isTop: true,
					title: '空铺率',
					value: Number(topData.value.c_empty_rate || '0'),
					colSpan: 6,
					valueUnit: '%',
					unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				},
				{
					mode: 'small',
					isTop: false,
					title: '空铺面积',
					value: Number(topData.value.c_empty_area || '0'),
					colSpan: 18,
					valueUnit: 'm²',
					unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
					icon: '',
					iconColor: '',
					iconSize: 20,
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				},
				{
					mode: 'small',
					isTop: false,
					title: '空铺预警',
					value: 0,
					colSpan: 6,
					valueUnit: '',
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
					// unitStyle: { color: '#ffffff', fontWeight: 600 }
				},
				// {
				// 	mode: 'small',
				// 	isTop: false,
				// 	title: '跟进中',
				// 	value: 8,
				// 	colSpan: 6,
				// 	valueUnit: '',
				// 	unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
				// 	icon: '',
				// 	iconColor: '',
				// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	// unitStyle: { color: '#FF9400', fontWeight: 600 }
				// },
				// {
				// 	mode: 'small',
				// 	isTop: false,
				// 	title: '待跟进',
				// 	value: 2,
				// 	colSpan: 6,
				// 	valueUnit: '',
				// 	icon: '',
				// 	iconColor: '',
				// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
				// }
			]

			dataList2.value = [
				{
					mode: 'large',
					isTop: true,
					title: '招商计划达成',
					value: Number(topData.value.c_finished_rate || '0'),
					colSpan: 24,
					valueUnit: '%',
					unitStyle: { color: '#ffffff', fontWeight: 600 },
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '28rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 }
				},
				// {
				// 	mode: 'small',
				// 	isTop: true,
				// 	title: '空铺率',
				// 	value: 1.01,
				// 	colSpan: 6,
				// 	valueUnit: '%',
				// 	unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
				// 	icon: '',
				// 	iconColor: '',
				// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// },
				{
					mode: 'small',
					isTop: false,
					title: '本月洽谈',
					value: Number(topData.value.c_monthtalk_count || '0'),
					colSpan: 12,
					valueUnit: '次',
					unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
					icon: '',
					iconColor: '',
					iconSize: 0,
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				},
				// {
				// 	mode: 'small',
				// 	isTop: false,
				// 	title: '接触品牌',
				// 	value: 10,
				// 	colSpan: 6,
				// 	valueUnit: '',
				// 	icon: '',
				// 	iconColor: '',
				// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
				// },
				{
					mode: 'small',
					isTop: false,
					title: '签约',
					value: Number(topData.value.c_signbrand_count || '0'),
					colSpan: 12,
					valueUnit: '',
					unitStyle: {},
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
					// unitStyle: { color: '#FF9400', fontWeight: 600 }
				},
				// {
				// 	mode: 'small',
				// 	isTop: false,
				// 	title: '首店',
				// 	value: '0',
				// 	colSpan: 6,
				// 	valueUnit: '',
				// 	icon: '',
				// 	iconColor: '',
				// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
				// },
			]

			dataList3.value = [
				{
					mode: 'large',
					isTop: true,
					title: '近一个月已签约',
					value: Number(topData.value.c_newsign_contract || '0'),
					colSpan: 18,
					valueUnit: '',
					unitStyle: {},
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '28rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 }
				},
				{
					mode: 'small',
					isTop: true,
					title: '及时签约率',
					value: Number(topData.value.c_signIn_rate || '0'),
					colSpan: 6,
					valueUnit: '%',
					unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				},
				// {
				// 	mode: 'small',
				// 	isTop: false,
				// 	title: '意向中',
				// 	value: 5,
				// 	colSpan: 6,
				// 	valueUnit: '',
				// 	unitStyle: {},
				// 	icon: '',
				// 	iconColor: '',
				// 	iconSize: 0,
				// 	titleStyle: { color: '#ffffff', fontSize: '22rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// },
				// {
				// 	mode: 'small',
				// 	isTop: false,
				// 	title: '流程中',
				// 	value: 10,
				// 	colSpan: 6,
				// 	valueUnit: '',
				// 	icon: '',
				// 	iconColor: '',
				// 	titleStyle: { color: '#ffffff', fontSize: '22rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
				// },
				{
					mode: 'small',
					isTop: false,
					title: '到期预警',
					value: Number(topData.value.c_end_count || '0'),
					colSpan: 18,
					valueUnit: '',
					unitStyle: {},
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
					// unitStyle: { color: '#FF9400', fontWeight: 600 }
				},
				{
					mode: 'small',
					isTop: false,
					title: '到期续约率',
					value: Number(topData.value.c_renew_rate || '0'),
					colSpan: 6,
					valueUnit: '%',
					unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
					// unitStyle: { color: '#ffffff', fontWeight: 600 }
				},
			]

			dataList4.value = [
				{
					mode: 'large',
					isTop: true,
					title: '在库品牌数',
					value: Number(topData.value.c_brand_count || '0'),
					colSpan: 24,
					valueUnit: '',
					unitStyle: {},
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '28rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 }
				},
				{
					mode: 'small',
					isTop: false,
					title: '本月增',
					value: Number(topData.value.c_monthin_brand || '0'),
					colSpan: 12,
					valueUnit: '',
					unitStyle: {},
					icon: '',
					iconColor: '',
					iconSize: 0,
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				},
				{
					mode: 'small',
					isTop: false,
					title: '本年入库',
					value: Number(topData.value.c_yearin_brand || '0'),
					colSpan: 12,
					valueUnit: '',
					icon: '',
					iconColor: '',
					titleStyle: { color: '#ffffff', fontSize: '24rpx' },
					largeValueStyle: { color: '#ffffff', fontWeight: 600 },
					smallValueStyle: { color: '#ffffff', fontWeight: 600 },
					// unitStyle: { color: '#ffffff', fontWeight: 600 }
				},
				// {
				// 	mode: 'small',
				// 	isTop: false,
				// 	title: '在谈中',
				// 	value: Number(topData.value.c_monthtalk_count || '0'),
				// 	colSpan: 6,
				// 	valueUnit: '',
				// 	unitStyle: {},
				// 	icon: '',
				// 	iconColor: '',
				// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	// unitStyle: { color: '#FF9400', fontWeight: 600 }
				// },
				// {
				// 	mode: 'small',
				// 	isTop: false,
				// 	title: '调研',
				// 	value: '0',
				// 	colSpan: 6,
				// 	valueUnit: '次',
				// 	unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
				// 	icon: '',
				// 	iconColor: '',
				// 	titleStyle: { color: '#ffffff', fontSize: '24rpx' },
				// 	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
				// 	// unitStyle: { color: '#ffffff', fontWeight: 600 }
				// },
			]

		}
	}
	///楼层信息
	const GetStructures = async () => {
		let req = {
			storeId: loginInfo.sUserStore
		}
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetStructures', req);
		uni.hideLoading();
		if (res) {
			floorList.value = res.map(x => {
				return {
					text: x.floorName,
					value: x.floor
				}
			})
			floorList.value.unshift({ text: '', value: '' });
		}

	}
	///业态信息
	const GetBusinessType = async () => {
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetBusinessType', loginInfo.sUserStore);
		uni.hideLoading();
		console.log('resresres', res)
		if (res) {
			businessType.value = res.ReturnObject.map(x => {
				return {
					text: x.c_name,
					value: x.c_ccode
				}
			})
			businessType.value.unshift({ text: '', value: '' });
		}
	}
	///铺位状态
	const GetCounterStatusData = async () => {
		let whereList = getWhereListReq(whereListData1.value);
		let req = {
			storeId: loginInfo.sUserStore,
			floor: whereList.find(x => x.c_col == 'floor')?.c_value || '',
			merchantState: whereList.find(x => x.c_col == 'merchantState')?.c_value || '',
			operationState: '',
		}
		listData1.value = [
			{
				c_merchant: '1',
				c_count: 0,
				c_percent_count: '0%',
				c_use_area: 0,
				c_percent_area: '0%'
			},
			{
				c_merchant: '2',
				c_count: 0,
				c_percent_count: '0%',
				c_use_area: 0,
				c_percent_area: '0%'
			},
			{
				c_merchant: '3',
				c_count: 0,
				c_percent_count: '0%',
				c_use_area: 0,
				c_percent_area: '0%'
			},
			{
				c_merchant: '0',
				c_count: 0,
				c_percent_count: '0%',
				c_use_area: 0,
				c_percent_area: '0%'
			},
		];
		chartData1.value = {};
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetCounterStatusData', req);
		uni.hideLoading();
		if (res) {
			listData1.value = listData1.value.map(x => {
				let itemList = res.filter(y => y.c_merchant === x.c_merchant);
				return {
					c_merchant: x.c_merchant,
					c_count: itemList.reduce((m, item) => { return m + item.c_count; }, 0),
					c_percent_count: itemList.reduce((m, item) => { return m + item.c_percent_count; }, 0).toFixed(2),
					c_use_area: itemList.reduce((m, item) => { return m + item.c_use_area; }, 0).toFixed(2),
					c_percent_area: itemList.reduce((m, item) => { return m + item.c_percent_area; }, 0).toFixed(2)
				}
			})
			chartData1.value = listData1.value.map(x => {
				return {
					name: colorList.value.find(y => y.value == x.c_merchant)?.text,
					value: x.c_count,
					percentCount: x.c_percent_count + '%',
					labelText: colorList.value.find(y => y.value == x.c_merchant)?.text + '   ' + x.c_percent_count + '%'
				}
			})
		}
	}
	///铺位预警
	const GetCounterWarnData = async () => {
		let whereList = getWhereListReq(whereListData2.value);
		const req = {
			PageSize: 10,
			WhereList: [{
				c_col: "c_store_id",
				c_oper: "等于",
				c_value: loginInfo.sUserStore,//取当前登录机构
				c_logic: "而且"
			},
			{
				c_col: "c_arrived_month",
				c_oper: "等于",
				c_value: 3,  //预警日期   默认90天
				c_logic: "而且"
			},
			{
				c_col: "c_floor_no",
				c_oper: "等于",
				c_value: whereList.find(x => x.c_col == 'floor')?.c_value || '',
				c_logic: "而且"
			}
			],
		};
		listData2.value = [];
		uni.showLoading("查询中...");
		const res = await service.request('管易通铺位预警', 'GetCounterWarnData', req);
		uni.hideLoading();
		if (res?.ReturnObject.length > 0) {
			listData2.value = res?.ReturnObject.map(x => {
				return {
					c_floor_name: x.c_floor_name,
					c_counter_name: x.c_name,
					c_area: x.c_use_area.toFixed(2),
					c_operate_status: x.c_operation_name,
					c_expire_date: dayjs(x.c_en_dt).isAfter(new Date()) ? dayjs(x.c_en_dt).format('YYYY-MM-DD') : '已到期'
				}
			})
		}
		title2.value = "铺位预警" + " [" + listData2.value.length + "]";
	}
	///洽谈中
	const InTalkingProcess = async () => {
		listData3.value = [];
		let whereList = getWhereListReq(whereListData3.value);
		let req = {
			storeId: loginInfo.sUserStore,
			floor: whereList.find(x => x.c_col == 'floor')?.c_value || '',
		}

		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'InTalkingProcess', req);
		uni.hideLoading();
		if (res) {
			let lengthArray = [];
			listData3.value = res.map(x => {
				let tagArray = !x.c_tagname ? [] : x.c_tagname.split(',');
				let newTagList = tagArray.filter(item => item !== "");
				lengthArray.push(newTagList.length);
				let progressData = [];
				if (newTagList.length > 0) {
					progressData = newTagList.map((y, index) => {
						return {
							type: tagType.value.find(m => m.text === y)?.type ?? 'primary',
							text: y
						}
					})
				}
				return {
					...x,
					c_tagname: progressData.length > 0 ? [progressData[progressData.length - 1]] : [],
					c_use_area: x.c_use_area.toFixed(2),
					c_bcname: getRelatedName('rdsGdsclasses', x.c_bccode ?? '') || '',
					c_counter_name: getRelatedName('rdsCounter', x.c_counter_no) || ''
				}

			})
			title3.value = "洽谈中" + " [" + listData3.value.length + "]";
		}
	}
	///洽谈工作
	const GetTalkWorkList = async () => {
		listData4.value = [];
		let whereList = getWhereListReq(whereListData4.value);
		let req = {
			storeId: loginInfo.sUserStore,
			departOrMember: whereList.find(x => x.c_col == 'departOrMember')?.c_value || '0'
		}
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetTalkWorkList', req);
		uni.hideLoading();
		if (res) {
			listData4.value = res.map(x => {
				return {
					...x,
					current_month_percent: x.current_month_percent,
					pre_month_percent: x.pre_month_percent,
					current_year_percent: x.current_year_percent,
					c_talk_name: req.departOrMember === "1" ? x.c_user_name : x.c_depart_name
				}
			})
			title4.value = "洽谈工作" + " [" + listData4.value.length + "]";
		}
	}
	///合同到期分布
	const GetContractExpireGroup = async () => {
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetContractExpireGroup', loginInfo.sUserStore);
		uni.hideLoading();
		console.log('GetContractExpireGroup', res)
		if (res) {
			listData5.value = res.map(x => {
				return {
					...x,
					c_use_area: x.c_use_area.toFixed(2),
				}
			})
			chartData2.value = res.map(x => {
				return {
					name: x.c_day_diff,
					value: x.c_count,
					percentCount: x.c_percent_count + '%',
					labelText: x.c_day_diff + ' ' + x.c_percent_count + '%'
				}
			})
			console.log('listData5', listData5.value)
		}
	}
	///合同明细
	const GetContractList = async () => {
		listData6.value = [];
		let whereList = getWhereListReq(whereListData6.value);
		let req = {
			storeId: loginInfo.sUserStore,
			floor: whereList.find(x => x.c_col == 'floor')?.c_value || '',
			counterform: whereList.find(x => x.c_col == 'counterform')?.c_value || '',
			arrivedMonth: whereList.find(x => x.c_col == 'arrivedMonth')?.c_value || '',
			c_con_no: '',
			c_version: ''
		}
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetContractList', req);
		uni.hideLoading();
		if (res) {
			listData6.value = res.sort(sortBy("day_diff")).map(x => {
				return {
					...x,
					c_en_dt: dayjs(x.c_en_dt).isAfter(new Date()) ? dayjs(x.c_en_dt).format('YYYY-MM-DD') : '已到期'
				}
			})
			title6.value = "合同明细" + " [" + listData6.value.length + "]";
		}
	}
	const sortBy = (props) => {
		return function (a, b) {
			return a[props] - b[props];
		}
	}
	///业态配比
	const GetBusinessData = async () => {
		let whereList = getWhereListReq(whereListData8.value);
		console.log('loginInfo', loginInfo)
		let req = {
			storeId: loginInfo.sUserStore,
			// tenantId: '8',
			isContractOrGuiHua: whereList.find(x => x.c_col == 'isContractOrGuiHua')?.c_value || '1'
		}
		chartData3.value = [];
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetBusinessData', req);
		uni.hideLoading();
		if (res) {
			const floorNameData = res.map(x => { return x.c_floorName });
			const floorNameList = new Set(floorNameData);
			chart3yData.value = [...floorNameList];
			const bcnameData = res.map(x => { return x.c_bcname });
			const bcnameList = [...new Set(bcnameData)];
			for (let i = 0; i < bcnameList.length; i++) {
				let dataList = []
				for (let j = 0; j < chart3yData.value.length; j++) {
					let floorList = res.filter(z => z.c_floorName === chart3yData.value[j])
					let itemList = res.filter(z => z.c_bcname === bcnameList[i] && z.c_floorName === chart3yData.value[j]) || [];
					let floorCount = floorList.length > 0 ? floorList.reduce((m, item) => { return m + item.c_bccount; }, 0) : 0;
					let bcnameCount = itemList.length > 0 ? itemList.reduce((m, item) => { return m + item.c_bccount; }, 0) : 0;
					if (itemList.length > 0) {
						let c_percent = floorCount == 0 ? 0 : (bcnameCount / floorCount * 100).toFixed(2);

						dataList.push(c_percent)
					}
					else {
						dataList.push(undefined);
					}
				}
				chartData3.value.push({
					name: bcnameList[i],
					type: 'bar',
					stack: 'total',
					emphasis: {
						focus: 'none',
						disabled: true,
					},
					data: dataList,
					barWidth: '100%',
					label: {
						show: true, // 显示标签
						position: ['50%', '50%'], // 标签位置
						// 可以通过 formatter 自定义标签格式
						formatter: bcnameList[i] + '\n' + '{c}' + '%', // {c} 表示数据值
						color: "#FFFFFF",
						lineHeight: 14,
						fontSize: 12,
						fontWeight:500,
						align: 'center',
						verticalAlign: 'middle'
					}
				})
			}
		}
	}
	///品牌分布
	const GetBrandStoreList = async () => {
		listData7.value = [];
		let whereList = getWhereListReq(whereListData7.value);
		let req = {
			storeId: loginInfo.sUserStore,
			type: whereList.find(x => x.c_col == 'type')?.c_value || '1'
		}
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通招商综合视图', 'GetBrandStoreList', req);
		uni.hideLoading();
		if (res) {
			listData7.value = res.map(x => {
				let c_type_name = "";
				switch (req.type) {
					case "1":
						c_type_name = x.c_abc;
						break;
					case "2":
						c_type_name = getRelatedName('rdsGdsclasses', x.c_bccode) || '';
						break;
					case "3":
						c_type_name = x.c_merchant_position;
						break;
				}
				return {
					...x,
					c_percent_count: x.c_percent_count.toFixed(2),
					c_percent_area: x.c_percent_area.toFixed(2),
					c_use_area: x.c_use_area.toFixed(2),
					c_type_name: c_type_name
				}
			})
			let selectData = getDictSelectList('招商定位')
			chartData4.value = listData7.value.map(x => {
				return {
					name: req.type != "3" ? x.c_type_name : selectData.find(y => y.value === x.c_type_name)?.text || '',
					value: x.c_count,
					percentCount: x.c_percent_count + '%',
					labelText: (req.type != "3" ? x.c_type_name : selectData.find(y => y.value === x.c_type_name)?.text || '') + '   ' + x.c_percent_count + '%'
				}
			})
		}
	}
	const tabChange = async (e) => {
		tabIndex.value = e;
		backToTop();
		switch (tabIndex.value) {
			case 0:
				await GetCounterStatusData();
				await GetCounterWarnData();
				break;
			case 1:
				await InTalkingProcess();
				await GetTalkWorkList();
				break;
			case 2:
				await GetContractExpireGroup();
				await GetContractList();
				break;
			case 3:
				await GetBusinessData();
				await GetBrandStoreList();
				break;
		}
	}
	const getWhereListReq = (whereList : any) => {
		return whereList.map(x => {
			return {
				c_col: x.c_col,
				c_oper: x.c_oper,
				c_value: x.c_value,
				c_logic: x.c_logic
			}
		});
	}
	const backToTop = () => {
		uni.pageScrollTo({ scrollTop: 0 })
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-color: #FFFFFF;
		background-size: 100% 176rpx;
		background-repeat: no-repeat;
		width: 100%;
	}

	.navigation {
		flex: 0 0 auto;
		margin-bottom: 5px;
	}

	.table-card-combox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx 20rpx 20rpx 0rpx;
	}

	.image-min {
		width: 100%;
		height: 150rpx;
		opacity: 0.6;
		margin-top: -20rpx;
	}

	.no-data-text {
		text-align: center;
		color: #cccccc;
		font-size: 26rpx;
		margin-top: -20rpx;
	}
</style>